<!--
 * @Author: Wangtao
 * @Date: 2022-09-02 17:00:13
 * @LastEditors: Wangtao
 * @LastEditTime: 2022-09-07 16:28:29
-->
<template>
  <div class="customer-form">
    <base-form :fieldList="followForm" :form="form" :rules="rules" ref="baseForm"></base-form>
  </div>
</template>

<script lang="ts">
/* 动态表单的form */
import { defineComponent, getCurrentInstance, computed, onMounted } from 'vue'
import { commonStore } from '@/common/store/modules/common'
import baseForm from '@/common/components/base-form/form.vue'
import { handleType } from '@app/customer/mixins/index'
import { getFormRules } from '@app/customer/mixins/index'

import mcCache from '@/common/utils/mc-get-cache'
export default defineComponent({
  name: 'DynamicForm',
  components: { baseForm },
  props: {
    type: {
      // 区分新建-add、编辑-edit
      type: String,
      default: 'add'
    },
    form: {
      type: Object,
      default: () => ({})
    },
    scenes: {
      type: String,
      default: ''
    }
  },
  emits: ['onChangeTemStatus'],
  setup(props, { emit }) {
    const instance: any = getCurrentInstance()

    const globalFieldsObj: any = computed(() => {
      // 全局字段对象
      return commonStore().publicCache.globalFieldCacheObj || {}
    })

    const dyForm = computed(() => {
      // 动态表单
      return commonStore().publicCache.dyForm || []
    })

    const followForm: any = computed(() => {
      const form: any = []
      if (dyForm.value && dyForm.value.length) {
        dyForm.value.forEach((item: any) => {
          if (item.scenes.includes(props.scenes)) {
            // 跟进记录的模版
            if (item.status) {
              // 模版启用
              emit('onChangeTemStatus', true)
              item.fields.forEach((v: any) => {
                // 启用的字段
                if (v.status) {
                  // 向表单中加入字段匹配到的名字
                  if (globalFieldsObj.value[v.field]) {
                    v = { ...globalFieldsObj.value[v.field], ...v }
                  }
                  handleType(v, props.form, props.type)
                  form.push(v)
                }
              })
            } else {
              emit('onChangeTemStatus', false)
            }
          }
        })
      }
      return form
    })

    const rules = computed(() => {
      return getFormRules(followForm.value) || {}
    })

    const isCheckForm = () => {
      // 表单校验
      return instance?.refs.baseForm.checkForm()
    }

    onMounted(async () => {
      await mcCache.$getCache('globalFieldCache', 'hasObj', '', '', '', '', 'field') // 全局字段
      await mcCache.$getCache('dyForm')
    })

    return {
      rules,
      followForm,
      isCheckForm
    }
  }
})
</script>

<style lang="stylus" scoped>
.customer-form
  position relative
  :deep(.el-form-item)
    width 100%
    margin-right 0 !important
    .el-select-v2, .el-cascader, .el-input-number, .el-input__wrapper
      width 100%
</style>
